<template>
   <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true">
                <el-menu-item index="/home">
                    <el-icon>
                        <icon-menu />
                    </el-icon>
                    <template #title>首页</template>
                </el-menu-item>
                <el-sub-menu :index="`/home/${item.path}`" v-for="(item,index) in checkedkeys" :key="index">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>{{item.label}}</span>
                  </template>
                    <el-menu-item :index="`/home/${item.path}/${child.path}`" v-for="(child,index) in item.children" :key="index">{{child.label}}</el-menu-item>
                </el-sub-menu>
    </el-menu>
</template>

<script>
    // 引入辅助函数
    import {mapState} from 'vuex'
    // 引入icon组件
    import {Document,Menu as IconMenu,Location,Setting,} from '@element-plus/icons-vue'


   export default {
     name:'',
     data () {
       return {
        //  是否折叠
        // isCollapse:true
       };
     },
    //  注册
    components:{
        Document,
        IconMenu,
        Location,
        Setting
    },
    props:['isCollapse'],
    // 获取vuex中的数据
    computed:{
      ...mapState(['checkedkeys'])
    }


   }

</script>
<style scoped>

</style>